<template>
    <div class="newPartner">
         <div class="newPartner_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">合作商详情<i class="el-icon-close"></i></div>
		</div>
        <!-- 商家类型与返回 -->
        <div class="newPartner_type">
            <div>施工队列表/<span>施工队详情</span></div>
            <el-button @click="backList" type="success">返回</el-button>
        </div>
        
        <!-- 新增商家信息 -->
        <div class="newPartner_info">
            <!-- 头部nav -->
            <div class="newPartner_nav">
                <div class="newPartner_navItem" :class="{'navItem_active':!navStatus}" @click="needInfo">基础信息<div class="navBorder" v-if="!navStatus"></div></div>
                <div class="newPartner_navItem" :class="{'navItem_active':navStatus}" @click="otherFile">附件<div class="navBorder" v-if="navStatus"></div></div> 
            </div>
            <!-- 基础信息 -->
            <div class="newPartner_needInfo" v-if="!navStatus">
                <div class="newPartner_info">
                    <div class="newPartner_info_box">
                        <form action="#" class="form">
                            <div class="form_left">
                                <ul>
                                    <li><span>联系人</span><input type="text" v-model="form.name"></li>
                                    <li><span>邮箱</span><input type="text" v-model="form.partner_emil"></li>
                                    <li><span>店铺名称</span><input type="text"  maxlength="12" v-model="form.title"></li>
                                </ul> 
                            </div>
                            <div class="form_right">
                                <ul>
                                    <li><span>手机号</span><input type="text" v-model="form.phone"></li>
                                    <li><span>店铺地址</span><input type="text" v-model="form.address"></li>
                                    <li>
                                      <span>入驻卖场</span>
                                      <el-select style="margin-left:10px;" v-model="form.market_id" placeholder="请选择">
                                        <el-option
                                          v-for="item in businessList"
                                          :key="item.id"
                                          :label="item.name"
                                          :value="item.id">
                                        </el-option>
                                      </el-select>
                                    </li>
                                </ul>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- 店铺图片-->
                <div class="shopRoom_img">
                    <!-- 店铺logo -->
                    <div class="shopRoom_logo">
                        <!-- <span>店铺logo</span> 
                        <div v-if="form.avatar.path">
                            <img :src="form.avatar.path" alt="">
                        </div>
                        <div class="notImg" v-else></div> -->
                        <span>店铺logo</span>
                        <div class="uploadImg" v-if="avatar==''" v-loading="loadingLogo" element-loading-text="图片上传中" element-loading-background="rgba(0, 0, 0, 0.5)">
                          <input
                            type="file"
                            accept="image/png, image/jpeg, image/gif, image/jpg"
                            @change="toUploadLogo"
                          />
                          <div class="fileImg">
                            <i class="el-icon-plus"></i>
                          </div>
                        </div>
                        <div v-else class="logoShadow">
                            <img :src="avatar" alt="">
                            <div class="deleteShadow">
                              <i class="el-icon-delete" @click="deleLogo"></i>
                            </div>
                        </div>
                    </div>
                    <!-- 店铺背景 -->
                    <div class="shopRoom_bg">
                        <span>店铺背景图</span>
                        <div class="uploadImg" v-if="!back_thumb_url" v-loading="loadingBg" element-loading-text="图片上传中" element-loading-background="rgba(0, 0, 0, 0.5)">
                          <input
                            type="file"
                            accept="image/png, image/jpeg, image/gif, image/jpg"
                            @change="toUploadBg"
                          />
                          <div class="fileImg">
                            <i class="el-icon-plus"></i>
                          </div>
                        </div>
                        <div v-else class="logoShadow">
                            <img :src="back_thumb_url" alt="">
                            <div class="deleteShadow">
                              <i class="el-icon-delete" @click="deleBackImg"></i>
                            </div>
                        </div>
                    </div> 
                </div>

                <!-- 到期时间与状态 -->
                <div class="dueDate">
                    <div class="dueDate_time">
                        <span>到期时间</span>
                        <input type="text">
                    </div>
                    <div class="shopRoom_status">
                        <span>店铺状态</span>
                        <el-radio v-model="form.status" :label="1">正常</el-radio>
                        <el-radio v-model="form.status" :label="0">禁用</el-radio>
                    </div>
                </div>

                <div class="nextBtn">
                    <button @click="nextBtn">下一步</button>
                </div>
            </div>

            <!-- 附件上传 -->
            <div class="newPartner_otherFile" v-else>
                <div class="cardImg">
                    <span>法人身份证</span>
                    <!-- <div class="cardImg_positive">
                        <div>
                            <img :src="form.id_card_top.path" alt="">
                        </div>
                        <p>身份证正面</p>
                    </div> -->
                    <div class="cardImg_positive">
                        <div v-if="id_card_top==''" class="imgWrap" v-loading="loadingTop" element-loading-text="图片上传中" element-loading-background="rgba(0, 0, 0, 0.5)">
                            <input
                            type="file"
                            accept="image/png, image/jpeg, image/gif, image/jpg"
                            @change="toUploadCardT"
                            />
                            <div class="upTit">
                            <i class="el-icon-plus"></i>
                            身份证正面
                            </div>
                        </div>
                        <div v-else class="imgWrap">
                            <img :src="id_card_top" alt="">
                            <div class="shadowImg">
                              <i @click="delCardTop" class="el-icon-delete"></i>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="cardImg_positive">
                       <div>
                            <img :src="form.id_card_back.path" alt="">
                       </div>
                        <p>身份证反面</p>
                    </div> -->
                    <div class="cardImg_positive">
                        <div v-if="id_card_back==''" class="imgWrap" v-loading="loadingBack" element-loading-text="图片上传中" element-loading-background="rgba(0, 0, 0, 0.5)">
                            <input
                            type="file"
                            accept="image/png, image/jpeg, image/gif, image/jpg"
                            @change="toUploadCardB"
                            />
                            <div class="upTit">
                            <i class="el-icon-plus"></i>
                            身份证反面
                            </div>
                        </div>
                        <div v-else class="imgWrap">
                            <img :src="id_card_back" alt="">
                            <div class="shadowImg">
                              <i @click="delCardBack" class="el-icon-delete"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="license">
                    <span>营业执照</span>
                    <!-- <div class="cardImg_positive">
                        <div v-if="form.license_thumb_url">
                            <img :src="form.license_thumb_url.path" alt="">
                        </div>
                        <div class="notImg" v-else></div>
                    </div> -->
                    <div class="cardImg_positive">
                          <div v-if="license_thumb_url==''" class="imgWrap" v-loading="loadingLicense" element-loading-text="图片上传中" element-loading-background="rgba(0, 0, 0, 0.5)">
                              <input
                              type="file"
                              accept="image/png, image/jpeg, image/gif, image/jpg"
                              @change="toUploadL"
                              />
                              <div class="upTit">
                              <i class="el-icon-plus"></i>
                              营业执照
                              </div>
                          </div>
                          <div v-else class="imgWrap">
                              <img :src="license_thumb_url" alt="">
                              <div class="shadowImg">
                                <i @click="delLicense" class="el-icon-delete"></i>
                              </div>
                          </div>
                    </div>
                </div>

                <!-- 提交按钮 -->
                <div class="submitBtn">
                    <button @click="stepFn">上一步</button>
                    <button @click="toAddShop">提交</button>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
        id:null,  //列表页面点击详情传的id
        navStatus: false ,//点击基础信息或附件上传
        avatar:'',
        id_card_top: "",
        id_card_back: "",
        license_thumb_url:'',
        back_thumb_url:'',
        loadingLogo:false,
        loadingBg:false,
        loadingTop:false,
        loadingBack:false,
        loadingLicense:false,
        form:{
          market_id:'',
          avatar:'',
          back_thumb_url:'',
          id_card_top: "",
          id_card_back: "",
          license_thumb_url:'',
        },
        businessList:[]
    };
  },

  mounted(){
      console.log(this.$route.query.id);
      this.id = this.$route.query.id;
      this.getConstrDetail()
      this.getBusinessList()
  },

  methods: {
    // 获取卖场列表
    getBusinessList(){
      this.$http.post('/api/root/Market/marketList').then(res=>{
        if(res.code==1){
          this.businessList = res.data?res.data:[]
        }
      })
    },
    // 获取详情
    getConstrDetail(){
        this.$http.post('/api/root/BuilderTeam/view',{id:this.id}).then(res=>{
            console.log(res);
            if(res.code==1){
                this.form = res.data?res.data:{};
                this.avatar = res.data.avatar.path;
                this.form.avatar = res.data.avatar.id;
                
                this.back_thumb_url = res.data.back_thumb_url.path;
                this.form.back_thumb_url = res.data.back_thumb_url.id;

                this.id_card_top = res.data.id_card_top.path;
                this.form.id_card_top = res.data.id_card_top.id;

                this.id_card_back = res.data.id_card_back.path;
                this.form.id_card_back = res.data.id_card_back.id;

                this.license_thumb_url = res.data.license_thumb_url.path;
                this.form.license_thumb_url = res.data.license_thumb_url.id
            }
        })
    },


    //点击基础信息
    needInfo() {
      this.navStatus = false;
    },

    // 点击下一步
    nextBtn(){
        this.navStatus = true
    },

    //点击上一步
    stepFn(){
        this.navStatus = false
    },

    // 点击附件选项
    otherFile() {
      this.navStatus = true;
    },

     // 上传logo
    toUploadLogo(event) {
      let file = event.target.files[0];
      let isLtSize = file.size / 1024 / 1024 < 10;
      if (!isLtSize) {
        this.$message.warning("上传文件不能超过 10MB!");
        return;
      }
      this.loadingLogo = true
      let form = new FormData();
        form.append("file", file);
        this.$http
          .post("/api/client/base/uploadfile", form)
          .then(res => {
            console.log(res);
            if (res.code == 1) {
              this.avatar = res.data.url;
              this.form.avatar = res.data.id;
              this.$message({
                type: "success",
                message: "上传成功"
              });
              this.loadingLogo = false
            }
          })
          .catch(err => {
            this.$message({
              showClose: true,
              message: "上传失败",
              type: "error"
            });
            this.loadingLogo = false
          });
    },

    
    // 上传店铺背景
    toUploadBg(event){
      let file = event.target.files[0];
      let isLtSize = file.size / 1024 / 1024 < 10;
      if (!isLtSize) {
        this.$message.warning("上传文件不能超过 10MB!");
        return;
      }
      this.loadingBg = true
      let form = new FormData();
        form.append("file", file);
        this.$http
          .post("/api/client/base/uploadfile", form)
          .then(res => {
            console.log(res);
            if (res.code == 1) {
              this.back_thumb_url = res.data.url;
              this.form.back_thumb_url = res.data.id;
              this.$message({
                type: "success",
                message: "上传成功"
              });
              this.loadingBg = false
            }
          })
          .catch(err => {
            this.$message({
              showClose: true,
              message: "上传失败",
              type: "error"
            });
            this.loadingLogo = false
          });
    },


    // 上传身份证正面
    toUploadCardT(event) {
      let file = event.target.files[0];
      let isLtSize = file.size / 1024 / 1024 < 10;
      if (!isLtSize) {
        this.$message.warning("上传文件不能超过 10MB!");
        return;
      }
      this.loadingTop = true
      let form = new FormData();
        form.append("file", file);
        this.$http
          .post("/api/client/base/uploadfile", form)
          .then(res => {
            console.log(res);
            if (res.code == 1) {
              this.id_card_top = res.data.url;
              this.form.id_card_top = res.data.id;
              this.$message({
                type: "success",
                message: "上传成功"
              });
              this.loadingTop = false
            }
          })
          .catch(err => {
            this.$message({
              showClose: true,
              message: "上传失败",
              type: "error"
            });
            this.loadingTop = false
          });
    },

    // 上传身份证反面
    toUploadCardB(event) {
      let file = event.target.files[0];
      let isLtSize = file.size / 1024 / 1024 < 10;
      if (!isLtSize) {
        this.$message.warning("上传文件不能超过 10MB!");
        return;
      }
      this.loadingBack = true
      let form = new FormData();
        form.append("file", file);
        this.$http
          .post("/api/client/base/uploadfile", form)
          .then(res => {
            console.log(res);
            if (res.code == 1) {
              this.id_card_back = res.data.url;
              this.form.id_card_back = res.data.id;
              this.$message({
                type: "success",
                message: "上传成功"
              });
              this.loadingBack = false
            }
          })
          .catch(err => {
            this.$message({
              showClose: true,
              message: "上传失败",
              type: "error"
            });
            this.loadingBack = false
          });
    },

    //上传营业执照
    toUploadL(event) {
      let file = event.target.files[0];
      let isLtSize = file.size / 1024 / 1024 < 10;
      if (!isLtSize) {
        this.$message.warning("上传文件不能超过 10MB!");
        return;
      }
      this.loadingLicense = true
      let form = new FormData();
        form.append("file", file);
        this.$http
          .post("/api/client/base/uploadfile", form)
          .then(res => {
            console.log(res);
            if (res.code == 1) {
              this.license_thumb_url = res.data.url;
              this.form.license_thumb_url = res.data.id;
              this.$message({
                type: "success",
                message: "上传成功"
              });
              this.loadingLicense = false
            }
          })
          .catch(err => {
            this.$message({
              showClose: true,
              message: "上传失败",
              type: "error"
            });
            this.loadingLicense =false
          });
    },

    // 点击logo的删除
    deleLogo() {
      this.form.avatar = "";
      this.avatar = "";
    },

    //点击删除身份证正面
    delCardTop() {
      this.form.id_card_top = "";
      this.id_card_top = "";
    },
    //点击删除身份证反面
    delCardBack() {
      this.form.id_card_back = ""; 
      this.id_card_back = "";
    },
    //点击删除营业执照
    delLicense() {
      this.form.license_thumb_url = "";
      this.license_thumb_url = "";
    },

    //点击删除背景图
    deleBackImg() {
      this.form.back_thumb_url = "";
      this.back_thumb_url = "";
    },

    // 点击返回到列表
    backList(){
      this.$router.back(1)
    },

    // 提交按钮
    toAddShop(){
      if(this.form.title==''){
        this.$message.warning('请填写店铺名称')
        return 
      }else if(this.form.phone==''){
        this.$message.warning('请填写手机号码')
        return 
      }else if(this.form.name==''){
        this.$message.warning('请填写联系人')
        return 
      }
      let arr = []
      this.form.service_type.map(item=>{
        arr.push(item.id)
      })
      this.form.service_type = arr.join(',')
      this.$http.post('/api/root/BuilderTeam/edit',this.form).then(res=>{
        console.log(res,'编辑结果');
        if(res.code==1){
          this.$message.success('修改成功')
          this.$router.back(1)
        }else{
          this.$message.warning(res.msg)
        }
      })
    }

  }
};
</script>

<style lang="less" scoped>
@import "constructionDetail.less";
</style>
